<template>
	<view class="container">
		<text @click="back()" class="iconfont iconzuojiantou-copy backPostion" style="font-size: 45rpx;font-weight:bold;color: #7153FF;"></text>
		<view class="bookInfo-top">
			<view class="bookName">
				<view class="bookInfo-title">《{{item.name}}》</view>
				<view class="bookInfo-author">作家：{{item.author}}</view>
			</view>
			<view class="bookUser">
				<view class="bookUserTitle"><text>当前\n借阅</text></view>
				<view class="userImg">
					<image :src="userImg"></image>
				</view>
			</view>
		</view>
 
		
		<view class="top">
			<image src="../../static/书圈.png"></image>
			<view class="bookImg">
				<image :src="item.imageAddress"></image>
			</view>
		</view>
		<view class="bookInfo">
			<!-- <view class="bookInfo-top">
				<view class="bookInfo-title">《{{item.name}}》</view>
				<view class="bookInfo-author">——{{item.author}}</view>
			</view> -->
			<!-- <view class="userSection"> 
				<view class="sectionTitle">借阅顺序:</view>
				<view class="sectionImg" v-for="(item, index) in userList" >
					
					<image v-if="item._id !== ''&&item._id !== 'haveSection'" src="../../static/logo.png"></image>
					<view v-if="item._id == 'haveSection'"  class="haveSection">不可选</view>
					<view @click="sectionItem(index)" v-if="item._id == '' " :class="{'kong': true, 'activeSection': sectionIndex == index}">可选</view>
				</view> 
			</view>
			<view class="sectionTips">
				<text>*不可选：表示您选择了其他书在该次序看</text>
			</view> -->
			<view class="bookInfo-content">
				<scroll-view class="scroll" scroll-y="true">
					  {{item.introduction}}
				</scroll-view>
			</view>
			<view class="bottomButton">
				<button>借阅</button>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				sectionIndex: 'p',
				userList:[
					{ _id: 'haveSection', avatorUrl: '' }, { _id: '123',avatorUrl: '' }, { _id: '', avatorUrl: '' }, { _id: '', avatorUrl: '' }
				],
				item: {
				
				},
			}
		},
		methods: {
			// 选择借阅的书
			sectionItem(index) {
				if(index == this.sectionIndex) {
					this.sectionIndex = ''
				} else {
					this.sectionIndex = index
				}
				
			},
			back () {
				console.log("!23123")
				wx.switchTab({
					url: '../index/index'
				})
				 // wx.navigateTo({ 
					// 	url: '../index/index'
				 //  })
			} 
		},
		onLoad(options){
			this.item = JSON.parse(decodeURIComponent(options.item))
			console.log(this.item)
		}
	}
</script>
 
<style>
	
	.top{
		margin-top: 100rpx;
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		align-content: center;
	}
	.top image{
		width: 100%;
		height: 730rpx;
	}
	.bookImg{
		position: absolute;
		top: 180rpx;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	.bookImg image{
		width: 200rpx;
		height: 300rpx;
	}
	.bookInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bookInfo-top {
		display: flex;
		margin-bottom: 50rpx;
	}
	.bookInfo-title {
		color: 	#7153FF;
		font-size: 42rpx;
		font-weight: bold;
	}
	.bookInfo-author {
		margin-top: 12rpx;
		color: 	#7153FF;
		font-size: 28rpx;
		font-weight: bold;
	}
	.bookInfo-content {
		margin: 30rpx;
		margin-top: 15rpx;
	}
	.scroll{
		font-size: 30rpx;
		color: #3C2B79;
		margin-bottom: 100rpx;
	}
	.userSection{
		display: flex;
		height: 100rpx;
		line-height: 120rpx;
		justify-content: space-between;
	}
	.sectionImg{
		margin-right: 30rpx;
		display: flex;
	}
	.sectionTitle{
		color: 	#7153FF;
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}
	.sectionImg image{
		width: 110rpx;
		border-radius: 50%;
		height: 110rpx;
		margin-right: 10rpx;
	}
	.kong , .haveSection{
		width: 110rpx;
		border-radius: 50%;
		height: 110rpx;
		margin-right: 0rpx;
		line-height: 110rpx;
		align-items: center;
		font-weight: bold;
		text-align: center;
	}
	.kong{
		background-color: #c7c8c4;
		color: black;
	}
	.haveSection {
		background-color: #7153FF;
		color: white;
	}
	.bookInfo-content {
		margin-top: 70rpx;
		
	}
	.sectionTips {
		color: #b9b4ad;
		font-size: 25rpx;
		margin-top: 40rpx;
		width: 100%;
		justify-content: left;
		margin-left: 60rpx;
	}
	.backPostion {
		left: 30rpx;
		top: 50rpx;
		position: fixed;
		z-index: 10;
	}
	/* 该次序被选中的时候的样式 */
	.activeSection {
		border: 10rpx solid #7153FF;
	}
	.bottomButton button{
		width: 96%;
		background-color: #7153FF;
		color: white;
	}
	.bottomButton {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		border-top: 1rpx solid #d3d3d3;
		background-color: #e7e7e7;
		padding: 6rpx;
		padding-top: 11rpx;
	}
	.bookInfo-top {
		width: 100%;
		display: flex;
		margin-top: 60rpx;
		height: 100rpx;
	}
	.bookName {
		width: 80%;
		/* background-color: black; */
		margin-left: 70rpx;
		text-align: center;
		justify-content: center;
	}
	.bookUser {
		margin-top: 20rpx;
		width: 20%;
		background-color: red;
	}
	 .bookUserTitle {
		color: 	#7153FF;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	 }
	 .userImg {
		 border-radius: 50%;
	 }
	.userImg image{
		width: 60rpx;
		height: 60rpx;
	}
	.bookUser {
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		margin-top: 150rpx;
	}
</style>
